<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Font Reference - Holo Icon Font</title>
    <link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="styles.css">
    <style type="text/css">
      html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{font-family:'Dosis','Tahoma',sans-serif}
.container{margin:15px auto;width:80%}
h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}
h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500}
.small{font-size:14px;color:#a5adb4;}
.small a{color:#a5adb4;}
.small a:hover{color:#fb565e}
.glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
.glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px}
.glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;font-size:32px;}
.glyphs.character-mapping .icon svg{fill:#000}
.glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;text-align:center;outline:0;}
.glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
.glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}
.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}
.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}

      
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Holo Icon Font</h1>
      <p class="small">This font was created with <a href="http://fontastic.me/">Fontastic</a></p>
      <h2>CSS mapping</h2>
      <ul class="glyphs css-mapping">
        <li>
          <div class="icon ic-about"></div>
          <input type="text" readonly="readonly" value="about">
        </li>
        <li>
          <div class="icon ic-accept"></div>
          <input type="text" readonly="readonly" value="accept">
        </li>
        <li>
          <div class="icon ic-accounts"></div>
          <input type="text" readonly="readonly" value="accounts">
        </li>
        <li>
          <div class="icon ic-add-alarm"></div>
          <input type="text" readonly="readonly" value="add-alarm">
        </li>
        <li>
          <div class="icon ic-add-group"></div>
          <input type="text" readonly="readonly" value="add-group">
        </li>
        <li>
          <div class="icon ic-add-person"></div>
          <input type="text" readonly="readonly" value="add-person">
        </li>
        <li>
          <div class="icon ic-add-to-queue"></div>
          <input type="text" readonly="readonly" value="add-to-queue">
        </li>
        <li>
          <div class="icon ic-airplane-mode-off"></div>
          <input type="text" readonly="readonly" value="airplane-mode-off">
        </li>
        <li>
          <div class="icon ic-airplane-mode-on"></div>
          <input type="text" readonly="readonly" value="airplane-mode-on">
        </li>
        <li>
          <div class="icon ic-alarms"></div>
          <input type="text" readonly="readonly" value="alarms">
        </li>
        <li>
          <div class="icon ic-attachment"></div>
          <input type="text" readonly="readonly" value="attachment">
        </li>
        <li>
          <div class="icon ic-back"></div>
          <input type="text" readonly="readonly" value="back">
        </li>
        <li>
          <div class="icon ic-backspace"></div>
          <input type="text" readonly="readonly" value="backspace">
        </li>
        <li>
          <div class="icon ic-bad"></div>
          <input type="text" readonly="readonly" value="bad">
        </li>
        <li>
          <div class="icon ic-battery"></div>
          <input type="text" readonly="readonly" value="battery">
        </li>
        <li>
          <div class="icon ic-bightness-low"></div>
          <input type="text" readonly="readonly" value="bightness-low">
        </li>
        <li>
          <div class="icon ic-bluetooth"></div>
          <input type="text" readonly="readonly" value="bluetooth">
        </li>
        <li>
          <div class="icon ic-bluetooth-connected"></div>
          <input type="text" readonly="readonly" value="bluetooth-connected">
        </li>
        <li>
          <div class="icon ic-bluetooth-searching"></div>
          <input type="text" readonly="readonly" value="bluetooth-searching">
        </li>
        <li>
          <div class="icon ic-brightness-auto"></div>
          <input type="text" readonly="readonly" value="brightness-auto">
        </li>
        <li>
          <div class="icon ic-brightness-high"></div>
          <input type="text" readonly="readonly" value="brightness-high">
        </li>
        <li>
          <div class="icon ic-brightness-medium"></div>
          <input type="text" readonly="readonly" value="brightness-medium">
        </li>
        <li>
          <div class="icon ic-call"></div>
          <input type="text" readonly="readonly" value="call">
        </li>
        <li>
          <div class="icon ic-camera"></div>
          <input type="text" readonly="readonly" value="camera">
        </li>
        <li>
          <div class="icon ic-cancel"></div>
          <input type="text" readonly="readonly" value="cancel">
        </li>
        <li>
          <div class="icon ic-cast"></div>
          <input type="text" readonly="readonly" value="cast">
        </li>
        <li>
          <div class="icon ic-cc-bcc"></div>
          <input type="text" readonly="readonly" value="cc-bcc">
        </li>
        <li>
          <div class="icon ic-chat"></div>
          <input type="text" readonly="readonly" value="chat">
        </li>
        <li>
          <div class="icon ic-cloud"></div>
          <input type="text" readonly="readonly" value="cloud">
        </li>
        <li>
          <div class="icon ic-collapse"></div>
          <input type="text" readonly="readonly" value="collapse">
        </li>
        <li>
          <div class="icon ic-collection"></div>
          <input type="text" readonly="readonly" value="collection">
        </li>
        <li>
          <div class="icon ic-computer"></div>
          <input type="text" readonly="readonly" value="computer">
        </li>
        <li>
          <div class="icon ic-copy"></div>
          <input type="text" readonly="readonly" value="copy">
        </li>
        <li>
          <div class="icon ic-crop"></div>
          <input type="text" readonly="readonly" value="crop">
        </li>
        <li>
          <div class="icon ic-cut"></div>
          <input type="text" readonly="readonly" value="cut">
        </li>
        <li>
          <div class="icon ic-data-usage"></div>
          <input type="text" readonly="readonly" value="data-usage">
        </li>
        <li>
          <div class="icon ic-dial-pad"></div>
          <input type="text" readonly="readonly" value="dial-pad">
        </li>
        <li>
          <div class="icon ic-directions"></div>
          <input type="text" readonly="readonly" value="directions">
        </li>
        <li>
          <div class="icon ic-discard"></div>
          <input type="text" readonly="readonly" value="discard">
        </li>
        <li>
          <div class="icon ic-dock"></div>
          <input type="text" readonly="readonly" value="dock">
        </li>
        <li>
          <div class="icon ic-download"></div>
          <input type="text" readonly="readonly" value="download">
        </li>
        <li>
          <div class="icon ic-drawer"></div>
          <input type="text" readonly="readonly" value="drawer">
        </li>
        <li>
          <div class="icon ic-edit"></div>
          <input type="text" readonly="readonly" value="edit">
        </li>
        <li>
          <div class="icon ic-email"></div>
          <input type="text" readonly="readonly" value="email">
        </li>
        <li>
          <div class="icon ic-end-call"></div>
          <input type="text" readonly="readonly" value="end-call">
        </li>
        <li>
          <div class="icon ic-error"></div>
          <input type="text" readonly="readonly" value="error">
        </li>
        <li>
          <div class="icon ic-event"></div>
          <input type="text" readonly="readonly" value="event">
        </li>
        <li>
          <div class="icon ic-expand"></div>
          <input type="text" readonly="readonly" value="expand">
        </li>
        <li>
          <div class="icon ic-fast-forward"></div>
          <input type="text" readonly="readonly" value="fast-forward">
        </li>
        <li>
          <div class="icon ic-favorite"></div>
          <input type="text" readonly="readonly" value="favorite">
        </li>
        <li>
          <div class="icon ic-flash-automatic"></div>
          <input type="text" readonly="readonly" value="flash-automatic">
        </li>
        <li>
          <div class="icon ic-flash-off"></div>
          <input type="text" readonly="readonly" value="flash-off">
        </li>
        <li>
          <div class="icon ic-flash-on"></div>
          <input type="text" readonly="readonly" value="flash-on">
        </li>
        <li>
          <div class="icon ic-forward"></div>
          <input type="text" readonly="readonly" value="forward">
        </li>
        <li>
          <div class="icon ic-full-screen"></div>
          <input type="text" readonly="readonly" value="full-screen">
        </li>
        <li>
          <div class="icon ic-gamepad"></div>
          <input type="text" readonly="readonly" value="gamepad">
        </li>
        <li>
          <div class="icon ic-go-to-today"></div>
          <input type="text" readonly="readonly" value="go-to-today">
        </li>
        <li>
          <div class="icon ic-good"></div>
          <input type="text" readonly="readonly" value="good">
        </li>
        <li>
          <div class="icon ic-group"></div>
          <input type="text" readonly="readonly" value="group">
        </li>
        <li>
          <div class="icon ic-half-important"></div>
          <input type="text" readonly="readonly" value="half-important">
        </li>
        <li>
          <div class="icon ic-headphones"></div>
          <input type="text" readonly="readonly" value="headphones">
        </li>
        <li>
          <div class="icon ic-headset"></div>
          <input type="text" readonly="readonly" value="headset">
        </li>
        <li>
          <div class="icon ic-help"></div>
          <input type="text" readonly="readonly" value="help">
        </li>
        <li>
          <div class="icon ic-import-export"></div>
          <input type="text" readonly="readonly" value="import-export">
        </li>
        <li>
          <div class="icon ic-important"></div>
          <input type="text" readonly="readonly" value="important">
        </li>
        <li>
          <div class="icon ic-keyboard"></div>
          <input type="text" readonly="readonly" value="keyboard">
        </li>
        <li>
          <div class="icon ic-labels"></div>
          <input type="text" readonly="readonly" value="labels">
        </li>
        <li>
          <div class="icon ic-location-found"></div>
          <input type="text" readonly="readonly" value="location-found">
        </li>
        <li>
          <div class="icon ic-location-off"></div>
          <input type="text" readonly="readonly" value="location-off">
        </li>
        <li>
          <div class="icon ic-location-searching"></div>
          <input type="text" readonly="readonly" value="location-searching">
        </li>
        <li>
          <div class="icon ic-make-available-offline"></div>
          <input type="text" readonly="readonly" value="make-available-offline">
        </li>
        <li>
          <div class="icon ic-map"></div>
          <input type="text" readonly="readonly" value="map">
        </li>
        <li>
          <div class="icon ic-merge"></div>
          <input type="text" readonly="readonly" value="merge">
        </li>
        <li>
          <div class="icon ic-mic"></div>
          <input type="text" readonly="readonly" value="mic">
        </li>
        <li>
          <div class="icon ic-mic-muted"></div>
          <input type="text" readonly="readonly" value="mic-muted">
        </li>
        <li>
          <div class="icon ic-mouse"></div>
          <input type="text" readonly="readonly" value="mouse">
        </li>
        <li>
          <div class="icon ic-network-cell"></div>
          <input type="text" readonly="readonly" value="network-cell">
        </li>
        <li>
          <div class="icon ic-network-wifi"></div>
          <input type="text" readonly="readonly" value="network-wifi">
        </li>
        <li>
          <div class="icon ic-new"></div>
          <input type="text" readonly="readonly" value="new">
        </li>
        <li>
          <div class="icon ic-new-account"></div>
          <input type="text" readonly="readonly" value="new-account">
        </li>
        <li>
          <div class="icon ic-new-attachment"></div>
          <input type="text" readonly="readonly" value="new-attachment">
        </li>
        <li>
          <div class="icon ic-new-email"></div>
          <input type="text" readonly="readonly" value="new-email">
        </li>
        <li>
          <div class="icon ic-new-event"></div>
          <input type="text" readonly="readonly" value="new-event">
        </li>
        <li>
          <div class="icon ic-new-label"></div>
          <input type="text" readonly="readonly" value="new-label">
        </li>
        <li>
          <div class="icon ic-new-picture"></div>
          <input type="text" readonly="readonly" value="new-picture">
        </li>
        <li>
          <div class="icon ic-next"></div>
          <input type="text" readonly="readonly" value="next">
        </li>
        <li>
          <div class="icon ic-next-item"></div>
          <input type="text" readonly="readonly" value="next-item">
        </li>
        <li>
          <div class="icon ic-not-important"></div>
          <input type="text" readonly="readonly" value="not-important">
        </li>
        <li>
          <div class="icon ic-not-secure"></div>
          <input type="text" readonly="readonly" value="not-secure">
        </li>
        <li>
          <div class="icon ic-overflow"></div>
          <input type="text" readonly="readonly" value="overflow">
        </li>
        <li>
          <div class="icon ic-paste"></div>
          <input type="text" readonly="readonly" value="paste">
        </li>
        <li>
          <div class="icon ic-pause"></div>
          <input type="text" readonly="readonly" value="pause">
        </li>
        <li>
          <div class="icon ic-pause-over-video"></div>
          <input type="text" readonly="readonly" value="pause-over-video">
        </li>
        <li>
          <div class="icon ic-person"></div>
          <input type="text" readonly="readonly" value="person">
        </li>
        <li>
          <div class="icon ic-phone"></div>
          <input type="text" readonly="readonly" value="phone">
        </li>
        <li>
          <div class="icon ic-picture"></div>
          <input type="text" readonly="readonly" value="picture">
        </li>
        <li>
          <div class="icon ic-place"></div>
          <input type="text" readonly="readonly" value="place">
        </li>
        <li>
          <div class="icon ic-play"></div>
          <input type="text" readonly="readonly" value="play">
        </li>
        <li>
          <div class="icon ic-play-over-video"></div>
          <input type="text" readonly="readonly" value="play-over-video">
        </li>
        <li>
          <div class="icon ic-previous"></div>
          <input type="text" readonly="readonly" value="previous">
        </li>
        <li>
          <div class="icon ic-previous-item"></div>
          <input type="text" readonly="readonly" value="previous-item">
        </li>
        <li>
          <div class="icon ic-read"></div>
          <input type="text" readonly="readonly" value="read">
        </li>
        <li>
          <div class="icon ic-refresh"></div>
          <input type="text" readonly="readonly" value="refresh">
        </li>
        <li>
          <div class="icon ic-remove"></div>
          <input type="text" readonly="readonly" value="remove">
        </li>
        <li>
          <div class="icon ic-repeat"></div>
          <input type="text" readonly="readonly" value="repeat">
        </li>
        <li>
          <div class="icon ic-replay"></div>
          <input type="text" readonly="readonly" value="replay">
        </li>
        <li>
          <div class="icon ic-reply"></div>
          <input type="text" readonly="readonly" value="reply">
        </li>
        <li>
          <div class="icon ic-reply-all"></div>
          <input type="text" readonly="readonly" value="reply-all">
        </li>
        <li>
          <div class="icon ic-return-from-full-screen"></div>
          <input type="text" readonly="readonly" value="return-from-full-screen">
        </li>
        <li>
          <div class="icon ic-rewind"></div>
          <input type="text" readonly="readonly" value="rewind">
        </li>
        <li>
          <div class="icon ic-ring-volume"></div>
          <input type="text" readonly="readonly" value="ring-volume">
        </li>
        <li>
          <div class="icon ic-rotate-left"></div>
          <input type="text" readonly="readonly" value="rotate-left">
        </li>
        <li>
          <div class="icon ic-rotate-right"></div>
          <input type="text" readonly="readonly" value="rotate-right">
        </li>
        <li>
          <div class="icon ic-save"></div>
          <input type="text" readonly="readonly" value="save">
        </li>
        <li>
          <div class="icon ic-screen-locked-to-landscape"></div>
          <input type="text" readonly="readonly" value="screen-locked-to-landscape">
        </li>
        <li>
          <div class="icon ic-screen-locked-to-portrait"></div>
          <input type="text" readonly="readonly" value="screen-locked-to-portrait">
        </li>
        <li>
          <div class="icon ic-screen-rotation"></div>
          <input type="text" readonly="readonly" value="screen-rotation">
        </li>
        <li>
          <div class="icon ic-sd-storage"></div>
          <input type="text" readonly="readonly" value="sd-storage">
        </li>
        <li>
          <div class="icon ic-search"></div>
          <input type="text" readonly="readonly" value="search">
        </li>
        <li>
          <div class="icon ic-secure"></div>
          <input type="text" readonly="readonly" value="secure">
        </li>
        <li>
          <div class="icon ic-select-all"></div>
          <input type="text" readonly="readonly" value="select-all">
        </li>
        <li>
          <div class="icon ic-send-now"></div>
          <input type="text" readonly="readonly" value="send-now">
        </li>
        <li>
          <div class="icon ic-settings"></div>
          <input type="text" readonly="readonly" value="settings">
        </li>
        <li>
          <div class="icon ic-share"></div>
          <input type="text" readonly="readonly" value="share">
        </li>
        <li>
          <div class="icon ic-shuffle"></div>
          <input type="text" readonly="readonly" value="shuffle">
        </li>
        <li>
          <div class="icon ic-slideshow"></div>
          <input type="text" readonly="readonly" value="slideshow">
        </li>
        <li>
          <div class="icon ic-sort-by-size"></div>
          <input type="text" readonly="readonly" value="sort-by-size">
        </li>
        <li>
          <div class="icon ic-split"></div>
          <input type="text" readonly="readonly" value="split">
        </li>
        <li>
          <div class="icon ic-stop"></div>
          <input type="text" readonly="readonly" value="stop">
        </li>
        <li>
          <div class="icon ic-storage"></div>
          <input type="text" readonly="readonly" value="storage">
        </li>
        <li>
          <div class="icon ic-switch-camera"></div>
          <input type="text" readonly="readonly" value="switch-camera">
        </li>
        <li>
          <div class="icon ic-switch-video"></div>
          <input type="text" readonly="readonly" value="switch-video">
        </li>
        <li>
          <div class="icon ic-time"></div>
          <input type="text" readonly="readonly" value="time">
        </li>
        <li>
          <div class="icon ic-undo"></div>
          <input type="text" readonly="readonly" value="undo">
        </li>
        <li>
          <div class="icon ic-unread"></div>
          <input type="text" readonly="readonly" value="unread">
        </li>
        <li>
          <div class="icon ic-upload"></div>
          <input type="text" readonly="readonly" value="upload">
        </li>
        <li>
          <div class="icon ic-usb"></div>
          <input type="text" readonly="readonly" value="usb">
        </li>
        <li>
          <div class="icon ic-video"></div>
          <input type="text" readonly="readonly" value="video">
        </li>
        <li>
          <div class="icon ic-view-as-grid"></div>
          <input type="text" readonly="readonly" value="view-as-grid">
        </li>
        <li>
          <div class="icon ic-view-as-list"></div>
          <input type="text" readonly="readonly" value="view-as-list">
        </li>
        <li>
          <div class="icon ic-volume-muted"></div>
          <input type="text" readonly="readonly" value="volume-muted">
        </li>
        <li>
          <div class="icon ic-volume-on"></div>
          <input type="text" readonly="readonly" value="volume-on">
        </li>
        <li>
          <div class="icon ic-warning"></div>
          <input type="text" readonly="readonly" value="warning">
        </li>
        <li>
          <div class="icon ic-web-site"></div>
          <input type="text" readonly="readonly" value="web-site">
        </li>
      </ul>
      <h2>Character mapping</h2>
      <ul class="glyphs character-mapping">
        <li>
          <div data-icon="&#xe000;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe000;">
        </li>
        <li>
          <div data-icon="&#xe001;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe001;">
        </li>
        <li>
          <div data-icon="&#xe002;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe002;">
        </li>
        <li>
          <div data-icon="&#xe003;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe003;">
        </li>
        <li>
          <div data-icon="&#xe004;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe004;">
        </li>
        <li>
          <div data-icon="&#xe005;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe005;">
        </li>
        <li>
          <div data-icon="&#xe006;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe006;">
        </li>
        <li>
          <div data-icon="&#xe007;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe007;">
        </li>
        <li>
          <div data-icon="&#xe008;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe008;">
        </li>
        <li>
          <div data-icon="&#xe009;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe009;">
        </li>
        <li>
          <div data-icon="&#xe00a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe00a;">
        </li>
        <li>
          <div data-icon="&#xe00b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe00b;">
        </li>
        <li>
          <div data-icon="&#xe00c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe00c;">
        </li>
        <li>
          <div data-icon="&#xe00d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe00d;">
        </li>
        <li>
          <div data-icon="&#xe00e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe00e;">
        </li>
        <li>
          <div data-icon="&#xe00f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe00f;">
        </li>
        <li>
          <div data-icon="&#xe010;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe010;">
        </li>
        <li>
          <div data-icon="&#xe011;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe011;">
        </li>
        <li>
          <div data-icon="&#xe012;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe012;">
        </li>
        <li>
          <div data-icon="&#xe013;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe013;">
        </li>
        <li>
          <div data-icon="&#xe014;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe014;">
        </li>
        <li>
          <div data-icon="&#xe015;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe015;">
        </li>
        <li>
          <div data-icon="&#xe016;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe016;">
        </li>
        <li>
          <div data-icon="&#xe017;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe017;">
        </li>
        <li>
          <div data-icon="&#xe018;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe018;">
        </li>
        <li>
          <div data-icon="&#xe019;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe019;">
        </li>
        <li>
          <div data-icon="&#xe01a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe01a;">
        </li>
        <li>
          <div data-icon="&#xe01b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe01b;">
        </li>
        <li>
          <div data-icon="&#xe01c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe01c;">
        </li>
        <li>
          <div data-icon="&#xe01d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe01d;">
        </li>
        <li>
          <div data-icon="&#xe01e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe01e;">
        </li>
        <li>
          <div data-icon="&#xe01f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe01f;">
        </li>
        <li>
          <div data-icon="&#xe020;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe020;">
        </li>
        <li>
          <div data-icon="&#xe021;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe021;">
        </li>
        <li>
          <div data-icon="&#xe022;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe022;">
        </li>
        <li>
          <div data-icon="&#xe023;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe023;">
        </li>
        <li>
          <div data-icon="&#xe024;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe024;">
        </li>
        <li>
          <div data-icon="&#xe025;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe025;">
        </li>
        <li>
          <div data-icon="&#xe026;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe026;">
        </li>
        <li>
          <div data-icon="&#xe027;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe027;">
        </li>
        <li>
          <div data-icon="&#xe028;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe028;">
        </li>
        <li>
          <div data-icon="&#xe029;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe029;">
        </li>
        <li>
          <div data-icon="&#xe02a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe02a;">
        </li>
        <li>
          <div data-icon="&#xe02b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe02b;">
        </li>
        <li>
          <div data-icon="&#xe02c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe02c;">
        </li>
        <li>
          <div data-icon="&#xe02d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe02d;">
        </li>
        <li>
          <div data-icon="&#xe02e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe02e;">
        </li>
        <li>
          <div data-icon="&#xe02f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe02f;">
        </li>
        <li>
          <div data-icon="&#xe030;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe030;">
        </li>
        <li>
          <div data-icon="&#xe031;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe031;">
        </li>
        <li>
          <div data-icon="&#xe032;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe032;">
        </li>
        <li>
          <div data-icon="&#xe033;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe033;">
        </li>
        <li>
          <div data-icon="&#xe034;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe034;">
        </li>
        <li>
          <div data-icon="&#xe035;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe035;">
        </li>
        <li>
          <div data-icon="&#xe036;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe036;">
        </li>
        <li>
          <div data-icon="&#xe037;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe037;">
        </li>
        <li>
          <div data-icon="&#xe038;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe038;">
        </li>
        <li>
          <div data-icon="&#xe039;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe039;">
        </li>
        <li>
          <div data-icon="&#xe03a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe03a;">
        </li>
        <li>
          <div data-icon="&#xe03b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe03b;">
        </li>
        <li>
          <div data-icon="&#xe03c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe03c;">
        </li>
        <li>
          <div data-icon="&#xe03d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe03d;">
        </li>
        <li>
          <div data-icon="&#xe03e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe03e;">
        </li>
        <li>
          <div data-icon="&#xe03f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe03f;">
        </li>
        <li>
          <div data-icon="&#xe040;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe040;">
        </li>
        <li>
          <div data-icon="&#xe041;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe041;">
        </li>
        <li>
          <div data-icon="&#xe042;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe042;">
        </li>
        <li>
          <div data-icon="&#xe043;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe043;">
        </li>
        <li>
          <div data-icon="&#xe044;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe044;">
        </li>
        <li>
          <div data-icon="&#xe045;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe045;">
        </li>
        <li>
          <div data-icon="&#xe046;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe046;">
        </li>
        <li>
          <div data-icon="&#xe047;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe047;">
        </li>
        <li>
          <div data-icon="&#xe048;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe048;">
        </li>
        <li>
          <div data-icon="&#xe049;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe049;">
        </li>
        <li>
          <div data-icon="&#xe04a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe04a;">
        </li>
        <li>
          <div data-icon="&#xe04b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe04b;">
        </li>
        <li>
          <div data-icon="&#xe04c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe04c;">
        </li>
        <li>
          <div data-icon="&#xe04d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe04d;">
        </li>
        <li>
          <div data-icon="&#xe04e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe04e;">
        </li>
        <li>
          <div data-icon="&#xe04f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe04f;">
        </li>
        <li>
          <div data-icon="&#xe050;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe050;">
        </li>
        <li>
          <div data-icon="&#xe051;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe051;">
        </li>
        <li>
          <div data-icon="&#xe052;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe052;">
        </li>
        <li>
          <div data-icon="&#xe053;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe053;">
        </li>
        <li>
          <div data-icon="&#xe054;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe054;">
        </li>
        <li>
          <div data-icon="&#xe055;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe055;">
        </li>
        <li>
          <div data-icon="&#xe056;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe056;">
        </li>
        <li>
          <div data-icon="&#xe057;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe057;">
        </li>
        <li>
          <div data-icon="&#xe058;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe058;">
        </li>
        <li>
          <div data-icon="&#xe059;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe059;">
        </li>
        <li>
          <div data-icon="&#xe05a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe05a;">
        </li>
        <li>
          <div data-icon="&#xe05b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe05b;">
        </li>
        <li>
          <div data-icon="&#xe05c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe05c;">
        </li>
        <li>
          <div data-icon="&#xe05d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe05d;">
        </li>
        <li>
          <div data-icon="&#xe05e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe05e;">
        </li>
        <li>
          <div data-icon="&#xe05f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe05f;">
        </li>
        <li>
          <div data-icon="&#xe060;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe060;">
        </li>
        <li>
          <div data-icon="&#xe061;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe061;">
        </li>
        <li>
          <div data-icon="&#xe062;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe062;">
        </li>
        <li>
          <div data-icon="&#xe063;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe063;">
        </li>
        <li>
          <div data-icon="&#xe064;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe064;">
        </li>
        <li>
          <div data-icon="&#xe065;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe065;">
        </li>
        <li>
          <div data-icon="&#xe066;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe066;">
        </li>
        <li>
          <div data-icon="&#xe067;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe067;">
        </li>
        <li>
          <div data-icon="&#xe068;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe068;">
        </li>
        <li>
          <div data-icon="&#xe069;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe069;">
        </li>
        <li>
          <div data-icon="&#xe06a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe06a;">
        </li>
        <li>
          <div data-icon="&#xe06b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe06b;">
        </li>
        <li>
          <div data-icon="&#xe06c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe06c;">
        </li>
        <li>
          <div data-icon="&#xe06d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe06d;">
        </li>
        <li>
          <div data-icon="&#xe06e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe06e;">
        </li>
        <li>
          <div data-icon="&#xe06f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe06f;">
        </li>
        <li>
          <div data-icon="&#xe070;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe070;">
        </li>
        <li>
          <div data-icon="&#xe071;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe071;">
        </li>
        <li>
          <div data-icon="&#xe072;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe072;">
        </li>
        <li>
          <div data-icon="&#xe073;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe073;">
        </li>
        <li>
          <div data-icon="&#xe074;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe074;">
        </li>
        <li>
          <div data-icon="&#xe075;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe075;">
        </li>
        <li>
          <div data-icon="&#xe076;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe076;">
        </li>
        <li>
          <div data-icon="&#xe077;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe077;">
        </li>
        <li>
          <div data-icon="&#xe078;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe078;">
        </li>
        <li>
          <div data-icon="&#xe079;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe079;">
        </li>
        <li>
          <div data-icon="&#xe07a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe07a;">
        </li>
        <li>
          <div data-icon="&#xe07b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe07b;">
        </li>
        <li>
          <div data-icon="&#xe07c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe07c;">
        </li>
        <li>
          <div data-icon="&#xe07d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe07d;">
        </li>
        <li>
          <div data-icon="&#xe07e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe07e;">
        </li>
        <li>
          <div data-icon="&#xe07f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe07f;">
        </li>
        <li>
          <div data-icon="&#xe080;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe080;">
        </li>
        <li>
          <div data-icon="&#xe081;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe081;">
        </li>
        <li>
          <div data-icon="&#xe082;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe082;">
        </li>
        <li>
          <div data-icon="&#xe083;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe083;">
        </li>
        <li>
          <div data-icon="&#xe084;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe084;">
        </li>
        <li>
          <div data-icon="&#xe085;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe085;">
        </li>
        <li>
          <div data-icon="&#xe086;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe086;">
        </li>
        <li>
          <div data-icon="&#xe087;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe087;">
        </li>
        <li>
          <div data-icon="&#xe088;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe088;">
        </li>
        <li>
          <div data-icon="&#xe089;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe089;">
        </li>
        <li>
          <div data-icon="&#xe08a;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe08a;">
        </li>
        <li>
          <div data-icon="&#xe08b;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe08b;">
        </li>
        <li>
          <div data-icon="&#xe08c;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe08c;">
        </li>
        <li>
          <div data-icon="&#xe08d;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe08d;">
        </li>
        <li>
          <div data-icon="&#xe08e;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe08e;">
        </li>
        <li>
          <div data-icon="&#xe08f;" class="icon"></div>
          <input type="text" readonly="readonly" value="&amp;#xe08f;">
        </li>
      </ul>
    </div><script type="text/javascript">
(function() {
  var glyphs, _i, _len, _ref;

  _ref = document.getElementsByClassName('glyphs');
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    glyphs = _ref[_i];
    glyphs.addEventListener('click', function(event) {
      if (event.target.tagName === 'INPUT') {
        return event.target.select();
      }
    });
  }

}).call(this);
</script>
  </body>
</html>